<template>
  <div class="YjdwRealTime-wrap">
    <div class="team-scroll">
      <div class="team-list" ref="teamScroll" @mouseenter="stopMarqueen" @mouseleave="autoMarqueen">
        <div class="team-block" :style="`height: ${blockHeight}px`"></div>
        <div class="team-inner" v-if="datas.length">
          <div class="team-item" v-for="(item, index) in datas">
            <div class="tit">{{item.title}}</div>
            <div class="time">{{item.createtime}}</div>
            <div class="content">{{item.content}}</div>
          </div>
        </div>
        <div class="team-block" :style="`height: ${blockHeight}px`"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
  import { bhfbServer } from '@/api/installServer';

  @Component({
    name: 'YjdwRealTime',
    components: {

    },
  })
  export default class YjdwRealTime extends Vue {
    private datas: any = [];
    private scrollTop: number = 0;
    private blockHeight: number = 0;
    private interval: any = null;
    private interval2: any = null;
    private mounted() {
      this.$nextTick( () => {
        this.blockHeight = (this.$refs as any).teamScroll.offsetHeight;
        this.getData();
        this.interval2 = setInterval( () => { // 60分钟请求一次
          this.getData();
        }, 60 * 1000 * 1000);
      });
    }
    private beforeDestroy() {
      clearInterval(this.interval);
      clearInterval(this.interval2);
    }
    private getData() {
      const params = {
        datanum: '6',
        dynatype: ''
      };
      bhfbServer.getYjdwRealTime(params).then( (res: any) => {
        if(res.data && res.data.data) {
          this.datas = res.data.data;
          this.autoMarqueen();
        }
      });
    }
    private autoMarqueen() {
      const ref: any = this.$refs;
      this.interval = setInterval(() => {
        this.scrollTop = this.scrollTop + 0.4;
        if (this.scrollTop >= (ref.teamScroll.scrollHeight - this.blockHeight)) {
          this.scrollTop = 0;
        }
        ref.teamScroll.scrollTop = this.scrollTop;
      }, 13);
    }
    private stopMarqueen() {
      clearInterval(this.interval);
    }
  }
</script>
<style lang="less" scoped>
  .YjdwRealTime-wrap{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    .team-scroll{
      width: calc(100% + 17px);
      height: 100%;
      padding: 10px 0;
      overflow: hidden;
      box-sizing: border-box;
    }
    .team-list{
      color: #fff;
      height: 100%;
      overflow: hidden;
      box-sizing: border-box;
      position: relative;
      .team-inner{
        box-sizing: border-box;
        position: relative;
        padding: 0 40px 0 80px;
        &:before{
          content:'';
          position:absolute;
          left: 56px;
          top: 0;
          width: 1px;
          height:100%;
          background: radial-gradient(#1bc6dc, #1bc6dc,transparent 90%);
        }
        .team-item{
          padding: 10px 0 0;
          position: relative;
          .tit{
            font-size: 20px;
            color: #f6e22e;
            position:relative;
            &:before{
              content:'';
              position: absolute;
              left: -42px;
              top: -2px;
              width: 37px;
              height: 29px;
              background: url('../../../assets/img/layout/team_point_blue.png') no-repeat center top;
            }
          }
          &:first-child {
            .tit{
              &:before{
                background-image: url('../../../assets/img/layout/team_point_red.png');
              }
            }
          }
          .content{
            color: #c4fdfb;
            font-size: 16px;
          }
          .time{
            margin: 12px 0 8px;
            font-size: 16px;
          }
        }
      }
    }
  }
</style>
